
.warrper{
    display: flex;
    justify-content: center;
}
.warrper .operation{
    width: 300px;
    

}
.warrper .operation .panl{
    position: relative;
    background: url('./img/bg.gif');
    height: 300px;
    width: 300px;
    transition: all .5s;
}
.warrper .operation .panl img{
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    transition: all .5s;
}
.warrper .Chart{
    width:478px;
    height: 500px;
    margin-left: 32px;
    display: grid;
    grid-template: repeat(20, 1fr)/repeat(5, .5fr);
    grid-auto-flow: column;
}
.warrper .Chart .item .num{
    display: inline-block;
    width: 30px;
    text-align: right;
    margin-right: .5em;
}
.warrper .Chart .item img{
    height: 18px;
    vertical-align: -2px;
}